@charset "UTF-8";

@import "lib/global";

/* Animations & Transform */
        
[class*=pui-animation-] { 
    @include animation-duration(0.5s); 
    @include animation-timing-function(ease-out);
    @include animation-fill-mode(both);
}

@include keyframes(fade-in) {
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
    }
}

.pui-animation-fade-in  {
    @include animation-name(fade-in);     
}    

@include keyframes(fade-out) {
    0% { 
        opacity: 1; 
    } 
    100%{ 
        opacity: 0; 
    }	
}   

.pui-animation-fade-out  {
    @include animation-name(fade-out);          
}    

@-webkit-keyframes scale-x {
    0% { 
        opacity: 0;
        -webkit-transform: scaleX(0);
    }
    100% { 
        opacity: 1;
        -webkit-transform: scaleX(1);
    }	
}

@keyframes scale-x {
    0% { 
        opacity: 0;
        transform: scaleX(0);
    }
    100% { 
        opacity: 1;
        transform: scaleX(1);
    }	
}     

.pui-animation-scale-x {
    @include animation-name(scale-x);         
}  

@-webkit-keyframes scale-y {
    0% { 
        opacity: 1; 
        -webkit-transform: scaleY(1);
    }
    100% { 
        opacity: 0;
        -webkit-transform: scaleY(0);
    }	
}

@keyframes scale-y {
    0% { 
        opacity: 1; 
        transform: scaleY(1);
    }
    100% { 
        opacity: 0;
        transform: scaleY(0);
    }	
}  

.pui-animation-scale-y {
    @include animation-name(scale-y);           
}  

@-webkit-keyframes zoom-in {
    0% { 
        opacity: 0;
        -webkit-transform: scale(0);
    }
    100% { 
        opacity: 1;
        -webkit-transform: scale(1);
    }	
}

@keyframes zoom-in {
    0% { 
        opacity: 0;
        transform: scale(0);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }	
}    

.pui-animation-zoom-in {
    @include animation-name(zoom-in);         
}    

@-webkit-keyframes zoom-out {
    0% { 
        opacity: 1; 
        -webkit-transform: scale(1);
    }
    100% { 
        opacity: 0;
        -webkit-transform: scale(0);
    }	
}

@keyframes zoom-out {
    0% { 
        opacity: 1; 
        transform: scale(1);
    }
    100% { 
        opacity: 0;
        transform: scale(0);
    }	
}

.pui-animation-zoom-out {
    @include animation-name(zoom-out);           
}    

@-webkit-keyframes slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.pui-animation-slide-up {
    @include animation-name(slide-up);         
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.pui-animation-slide-down {
    @include animation-name(slide-down); 
}

@-webkit-keyframes slide-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.pui-animation-slide-left { 
    @include animation-name(slide-left);          
}

@-webkit-keyframes slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.pui-animation-slide-right {
    @include animation-name(slide-right); 
}

@-webkit-keyframes shaking {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    10% {
        -webkit-transform: translateX(-9%);
    }
    20% {
        -webkit-transform: translateX(8%);
    }
    30% {
        -webkit-transform: translateX(-7%);
    }
    40% {
        -webkit-transform: translateX(6%);
    }
    50% {
        -webkit-transform: translateX(-5%);
    }
    60% {
        -webkit-transform: translateX(4%);
    }
    70% {
        -webkit-transform: translateX(-3%);
    }
    80% {
        -webkit-transform: translateX(2%);
    }
    90% {
        -webkit-transform: translateX(-1%);
    }
} 

@keyframes shaking {
    0%, 100% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-9%);
    }
    20% {
        transform: translateX(8%);
    }
    30% {
        transform: translateX(-7%);
    }
    40% {
        transform: translateX(6%);
    }
    50% {
        transform: translateX(-5%);
    }
    60% {
        transform: translateX(4%);
    }
    70% {
        transform: translateX(-3%);
    }
    80% {
        transform: translateX(2%);
    }
    90% {
        transform: translateX(-1%);
    }
}

.pui-animation-shaking {
    @include animation-name(shaking);
}

.pui-animation-shaking-x {
    @include animation-name(shaking);
}

@-webkit-keyframes shaking-y {
    0%, 100% {
        -webkit-transform: translateY(0);
    }
    10% {
        -webkit-transform: translateY(-9%);
    }
    20% {
        -webkit-transform: translateY(8%);
    }
    30% {
        -webkit-transform: translateY(-7%);
    }
    40% {
        -webkit-transform: translateY(6%);
    }
    50% {
        -webkit-transform: translateY(-5%);
    }
    60% {
        -webkit-transform: translateY(4%);
    }
    70% {
        -webkit-transform: translateY(-3%);
    }
    80% {
        -webkit-transform: translateY(2%);
    }
    90% {
        -webkit-transform: translateY(-1%);
    }
} 

@keyframes shaking-y {
    0%, 100% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-9%);
    }
    20% {
        transform: translateY(8%);
    }
    30% {
        transform: translateY(-7%);
    }
    40% {
        transform: translateY(6%);
    }
    50% {
        transform: translateY(-5%);
    }
    60% {
        transform: translateY(4%);
    }
    70% {
        transform: translateY(-3%);
    }
    80% {
        transform: translateY(2%);
    }
    90% {
        transform: translateY(-1%);
    }
} 

.pui-animation-shaking-y {
    @include animation-name(shaking-y); 
}

@-webkit-keyframes rotate {
    0% { 
        -webkit-transform: rotate(360deg);
    }
    100% { 
        -webkit-transform: rotate(0);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0);
    }
}

.pui-animation-rotate {
    @include animation-name(rotate);
}

@-webkit-keyframes rotate-x {
    0% { 
        -webkit-transform: rotateX(360deg);
    }
    100% { 
        -webkit-transform: rotateX(0);
    }
}

@keyframes rotate-x {
    0% { 
        transform: rotateX(360deg);
    }
    100% {
        transform: rotateX(0);
    }
}

.pui-animation-rotate-x {
    @include animation-name(rotate-x);
}

@-webkit-keyframes rotate-y {
    0% { 
        -webkit-transform: rotateY(360deg);
    }
    100% { 
        -webkit-transform: rotateY(0);
    }
}

@keyframes rotate-y {
    0% { 
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(0);
    }
}

.pui-animation-rotate-y { 
    @include animation-name(rotate-y);
}

@-webkit-keyframes stretch-left {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1.02);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(0.98);
	}				
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(1);
	}
}

@keyframes stretch-left {
	0% {
		transform: scaleX(0.3);
	}
	40% {
		transform: scaleX(1.02);
	}
	60% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(0.98);
	}				
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(1);
	}
}

.pui-animation-stretch-left { 
    @include animation-name(stretch-left);
	@include animation-duration(1s);	
	@include transform-origin(100% 0%);
}

@-webkit-keyframes stretch-right {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1.02);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(0.98);
	}				
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(1);
	}
}

@keyframes stretch-right {
	0% {
		transform: scaleX(0.3);
	}
	40% {
		transform: scaleX(1.02);
	}
	60% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(0.98);
	}				
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(1);
	}
}

.pui-animation-stretch-right { 
    @include animation-name(stretch-right);
	@include animation-duration(1s);	
	@include transform-origin(0% 0%);
}

@-webkit-keyframes stretch-up {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}
}

@keyframes stretch-up {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}
}

.pui-animation-stretch-up { 
    @include animation-name(stretch-up);
	@include animation-duration(1s);	
	@include transform-origin(0% 100%);
}

@-webkit-keyframes stretch-down {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(0.98);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(0.98);
	}
	100% {
		-webkit-transform: scaleY(1);
	}		
}

@keyframes stretch-down {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(0.98);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(0.98);
	}
	100% {
		transform: scaleY(1);
	}		
}

.pui-animation-stretch-down { 
    @include animation-name(stretch-down);
	@include animation-duration(1s);	
	@include transform-origin(100% 0%);
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-5deg);	
	}
	50% {
		-webkit-transform: rotate(5deg);
	}
	100% {
		-webkit-transform: rotate(-5deg);	
	}				
}

@keyframes tossing {
	0% {
		transform: rotate(-5deg);	
	}
	50% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(-5deg);	
	}
}

.pui-animation-tossing {
	@include animation-name(tossing);
	@include animation-duration(2.5s);
	@include animation-iteration-count(infinite);
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(8%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(8%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

.pui-animation-floating {
	@include animation-name(floating);
	@include animation-duration(1.5s);
	@include animation-iteration-count(infinite);
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

.pui-animation-pulse {
	@include animation-name(pulse);
	@include animation-duration(1.5s);	
	@include animation-iteration-count(infinite);
}
    
@-webkit-keyframes pulse-plus {
	0% {
		-webkit-transform: scale(0.8);
		opacity: 0.6;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.8);
		opacity: 0.6;	
	}			
}

@keyframes pulse-plus {
	0% {
		transform: scale(0.8);
		opacity: 0.6;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.8);
		opacity: 0.6;	
	}			
}

.pui-animation-pulse-plus {
	@include animation-name(pulse-plus);
	@include animation-duration(1.5s);	
	@include animation-iteration-count(infinite);
}
    
@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.6);
	}
	60%{
		-webkit-transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
	}				
	100%{
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}		
}

@keyframes bounce {
	0% {
		transform: translateY(0%) scaleY(0.6);
	}
	60%{
		transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		transform: translateY(0%) scaleY(0.95) scaleX(1);
	}				
	100%{
		transform: translateY(0%) scaleY(1) scaleX(1);
    }
}

.pui-animation-bounce {
	@include animation-name(bounce);
	@include animation-duration(1.5s);	
	@include animation-timing-function(ease);	
	@include transform-origin(50% 100%);	
}
            
@-webkit-keyframes expand-in {
    0% {
        -webkit-transform: scale(1.8);		
    }
    50% {
        -webkit-transform: scale(0.95);
    }	
    80% {
        -webkit-transform: scale(1.05);
    }
    90% {
        -webkit-transform: scale(0.98);
    }	
    100% {
        -webkit-transform: scale(1);
    }	
}
            
@keyframes expand-in {
    0% {
        transform: scale(1.8);		
    }
    50% {
        transform: scale(0.95);
    }	
    80% {
        transform: scale(1.05);
    }
    90% {
        transform: scale(0.98);
    }	
    100% {
        transform: scale(1);
    }	
}

.pui-animation-expand-in {
    @include animation-name(expand-in);
    @include animation-duration(1.2s);
    @include animation-timing-function(ease-out);		

    visibility: visible !important;	
}

@-webkit-keyframes expand-out {
    0% {		
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.95);
    }	
    80% {
        -webkit-transform: scale(1.8);
    }
    90% {
        -webkit-transform: scale(1.68);
    }	
    100% {
        -webkit-transform: scale(1.8);
    }	
}

@keyframes expand-out {
    0% {		
        transform: scale(1);
    }
    20% {
        transform: scale(0.95);
    }	
    80% {
        transform: scale(1.8);
    }
    90% {
        transform: scale(1.68);
    }	
    100% {
        transform: scale(1.8);
    }	
}

.pui-animation-expand-out {
    @include animation-name(expand-out);
    @include animation-duration(1.2s);
    @include animation-timing-function(ease-in-out);	

    visibility: visible !important;	
}

.pui-animation-reverse { 
    @include animation-direction(reverse !important);
}

.pui-animation-stop, .pui-animation-paused {
    @include animation-play-state(paused !important);
}

.pui-animation-repeat {
    @include animation-iteration-count(infinite !important);
}

